<template>
  <el-menu :default-active="onRoutes" :collapse="$store.state.isCollapse" router>
    <el-submenu v-show="hasNav" v-for="(item, index) in cnav.child" :key="index" :index="index+''">
      <template slot="title">
        <i v-if="item.icon" :class="'iconfont icon-' + item.icon"></i>
        <span>{{item.name}}</span>
      </template>
      <el-menu-item v-for="(subItem, index) in item.child" :key="index" :index="subItem.path">{{subItem.name}}</el-menu-item>
    </el-submenu>
    <el-menu-item v-show="!hasNav" index="/home">
      <template slot="title">
        <i class="iconfont icon-home"></i>
        <span>首页</span>
      </template>
    </el-menu-item>
  </el-menu>
</template>

<script>
export default {
  props: ['cpath', 'cnav'],
  computed: {
    onRoutes: function () {
      return this.$route.path
    },
    hasNav: function () {
      return this.cpath !== ''
    }
  }
}
</script>
